import useForm from "@module/useForm";

export default function Form(props) {
    const {
        formData,
        handleChange,
        handleSubmit,
        updateFormData,
        validations,
        addValidate,
        addValidateMulti
    } = useForm(doSubmit, {}, "testForm");

    function doSubmit() {
        console.log(formData);
    }

    function validate1(value) {
        console.log(value);
        return value.length > 2 ? "" : "长度小于2";
    }

    // addValidate("test1", [validate1]);
    addValidateMulti({ test1: [validate1] });

    console.log("load form.js");

    React.useEffect(() => {
        setTimeout(function() {
            console.log("update value");
            updateFormData({
                email: "testa",
                password: "abc",
                level: "3"
            });
        }, 3000);
    }, []);

    React.useEffect(() => {
        console.log("refresh view");
        console.log(formData);
    });

    return (
        <div>
            <span>{Uts.toStr(formData)}</span>
            <form name="testForm" onSubmit={handleSubmit}>
                <input
                    className="zen_bd-1"
                    type="email"
                    name="email"
                    onChange={handleChange}
                    value={formData.email}
                    required
                />
                <br />
                <input
                    className={Uts.sc([
                        formData.$$status.test1 ? "a" : "b",
                        "zen_bd-1"
                    ])}
                    type="text"
                    name="test1"
                    onChange={handleChange}
                    value={formData.test1}
                />
                <span className="zen_red">{formData.$$status.test1}</span>
                <br />
                <input
                    className="zen_bd-1"
                    type="password"
                    name="password"
                    onChange={handleChange}
                    value={formData.password}
                    required
                />
                <br />
                <select
                    name="level"
                    onChange={handleChange}
                    value={formData.level}
                >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
                <button>提交</button>
            </form>
        </div>
    );
}
